<template>
    <div >
        <x-header style="background-color: #333" id="cs_content" :class="searchBarFixed == true ? 'isFixed' :''" :right-options="{showMore: true}" @on-click-more="showChapters">{{chapterindex}}</x-header>
        <div  v-for="src in list" style="background-color:yellow;text-align:center;">
            <span style="font-size:20px;">Loading</span>
            <x-img :src="src" :webp-src="`${src}?type=webp`" @on-success="success" @on-error="error" class="ximg-demo" error-class="ximg-error" :offset="800" container="#vux_view_box_body"></x-img>
        </div>
        <x-button type="primary" :link="'/read?t_id='+parseInt(tid)+'&n_id='+nid"  >下一章</x-button>


        <div>
            <popup v-model="show" height="50%" >
                <div class="popup">
                    <group>
                        <Cell v-for="(item,index) in chapter_list"  :title="(index+1)+item.title"></Cell>
                    </group>
                </div>
            </popup>
        </div>
    </div>


</template>

<script>
  import {XHeader, Actionsheet, XImg, XButton, Popup, Cell } from 'vux'
  export default {
      name: 'read',
      components: {
          XHeader,
          Actionsheet,
          XImg,
          XButton,
          Popup,
          Cell
      },
      data () {
          return {
              menus: {
                  menu1: 'Take Photo',
                  menu2: 'Choose from photos'
              },
              showMenus: false,
              list: [

              ],
              tid:0,
              searchBarFixed:false,
              scrollTop: 0,
              chapter_list:[],
              show:false,
              chapterindex:0
          }
      },
      methods: {
          success (src, ele) {
              console.log('success load', src)
              const span = ele.parentNode.querySelector('span')
              // ele.parentNode.removeChild(span)
              span.setAttribute('class','cs_hide')
          },
          error (src, ele, msg) {
              console.log('error load', msg, src)
              const span = ele.parentNode.querySelector('span')
              span.innerText = '加载失败'
          },
        // 获取章节详情
        get_detail(){
          window.scroll(0, 0);
          const that = this
          this.$ajax.post('/api/detail',{
            id: this.tid,
          }).then(ret => {
            this.list = [];
            this.tid = parseInt(this.tid)+1;
            console.log(ret)
            this.list = ret.data.data.content.split(',')


            const chapter_list = this.chapter_list
            for (const item in  chapter_list){
              console.log(item)
              if(chapter_list[item].id == this.tid){
                this.chapterindex = parseInt(item-1)+chapter_list[item-2].title;
              }
            }
          })
        },
        // 滚动事件响应
        handleScroll () {
          const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          // const offsetTop = document.querySelector('#cs_content').offsetTop
          console.log(scrollTop)
          if (scrollTop > this.scrollTop) {
            this.searchBarFixed = false
            this.scrollTop = scrollTop
          } else {
            this.searchBarFixed = true
            this.scrollTop = scrollTop
          }
        },
        // 显示章节列表
        showChapters(){
            this.show = true
            console.log(1)
        },
        // 获取章节列表
        get_chapterlist(){
          this.$ajax.post('/api/chapter',{
            nid: this.nid,
          }).then(ret => {
            this.tid = parseInt(this.tid)+1;
            console.log(ret)
            this.chapter_list = ret.data.data.rows
            this.get_detail()

          })
        }
      },
      created: function () {
        this.tid = this.$route.query.t_id
        this.nid = this.$route.query.n_id

        this.get_chapterlist()

      },
      beforeRouteUpdate (to, from, next) {
        const that = this
        console.log(to)
        console.log(from)
        if(parseInt(to.query.t_id) > parseInt(from.query.t_id)){
            this.get_detail()
            next()
        }else {
          this.tid = parseInt(to.query.t_id)
          this.get_detail()
          next()
        }



      },
      mounted () {
          window.addEventListener('scroll', this.handleScroll)
      },
        destroyed () {
          window.removeEventListener('scroll', this.handleScroll)
        },


  }
</script>

<style scoped lang="stylus">
    .ximg-demo
        width 100%
        height auto
        display block
        margin 0
    .ximg-error
        background-color yellow
    .ximg-error:afte
        content: '加载失败';
        color: red;
    .isFixed
        position fixed
        top 0
        width 100%
    .cs_hide
        display: none
</style>
